<template>
  <cu-layout :navProp="{ placeholder: true, title: '选择所属公司', textColor: 'black' }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-search-page-container`]" :style="{ height: `calc(100vh - ${$Platform.navbar - 10}px)` }">
      <uv-sticky offsetTop="0" :customNavHeight="0">
        <view class="input-box">
          <uv-input
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            placeholder="至少输入两个关键词"
            shape="circle"
            v-model="text"
            @input.trim="bindKeyInput"
          ></uv-input>
          <uv-button type="plain">搜索</uv-button>
        </view>
      </uv-sticky>
      <view class="content__text">搜索结果</view>
      <view class="input-list" v-if="text">
        <template v-if="searchList.length != 0">
          <view v-for="(item, index) in searchList" :key="index" class="input-item" @click="handleSelect(item)">
            <view class="detail">
              <view class="detail-left">
                <view class="company-name">
                  <text>{{ item.leftText }}</text>
                  <text class="primary">{{ item.centerText }}</text>
                  <text>{{ item.rightText }}</text>
                </view>
                <view class="desc" v-if="item.start_time">合作时间：{{ item.start_time }}</view>
              </view>
              <view class="detail-right desc">员工认证 <uv-icon name="arrow-right"></uv-icon></view>
            </view>
          </view>
        </template>
        <template v-else>
          <cu-empty mode="data" text="暂无公司信息"> </cu-empty>
        </template>
      </view>
      <!-- <view class="content__tip" v-if="showTips" :style="{ 'margin-top': isEmpty ? '187px' : '20px' }">{{ tips }}</view>
      <view class="content__btn" v-if="showBtn" @click="handleJump">企业合作申请</view> -->
    </view>
  </cu-layout>
</template>

<script>
import { queryCompany } from './api'

import { setStorageCache, removeStorageCache } from '@/common/cache'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'searchPage',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      text: '',
      history: [],
      hotList: [],
      searchList: [],
      page: 1,
      total: 0,
      isEmpty: false,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    // ...mapGetters(),
    showLoading() {
      return !!this.keyword && this.searchList.length && this.hasMore
    },
    hasMore() {
      // total 为 0 即为第一次搜索
      return this.total ? this.total / 10 > this.page - 1 : true
    },
    showTips() {
      return this.searchList.length || this.isEmpty
    },
    showBtn() {
      return !this.hasMore || this.isEmpty
    },
    tips() {
      if (!this.hasMore || this.isEmpty) {
        return '查询不到，您可为您的企业进行申请'
      }
      if (this.hasMore) {
        return '上拉加载更多'
      }
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {
    if (this.total > this.searchList.length) {
      this.page += 1
      this.isEmpty = false
      this.bindKeyInput()
    }
  },

  methods: {
    // ...mapActions([]),
    handleJump() {
      this.$ROUTE.go('/pages/subpackage/company-customer-verification/search')
    },
    bindKeyInput(e) {
      if (e) {
        this.page = 1
        this.searchList = []
      }
      const text = e || this.text
      this.isEmpty = false
      if (!text) return
      uni.$uv.debounce(async () => {
        const { data } = await queryCompany({ key_word: text, page: this.page, length: 10 })
        this.total = data.results.length || data.totalCount
        if (data.results.length == 0) {
          this.isEmpty = true
        }
        const list = data.results.map((v) => {
          const splitText = v.company_name.split(text)
          v.leftText = splitText[0]
          v.centerText = text
          v.rightText = splitText[1]
          return v
        })
        this.searchList = [...this.searchList, ...list]
      }, 300)
    },
    // 搜索
    handleSelect(item) {
      setStorageCache('certificationCompanyInfo', item)
      uni.navigateBack()
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('search-page-container')} {
  width: 100%;
  background: white;
  box-sizing: border-box;
  padding: 0 30rpx;
  overflow-y: scroll;
  .input-box {
    background: white;
    display: flex;
    padding: 30rpx 0;
    ::v-deep .uv-input {
      border-radius: 10rpx !important;
    }
    // .uv-input {
    //   width: 80%;
    //   border-radius: 20rpx;
    // }
    // .uv-button {
    //   width: 20%;
    // }
  }
  .input-list {
    display: flex;
    flex-direction: column;
    margin-top: 40rpx;
    max-height: calc(100% - 700rpx);
    overflow: hidden;
    .input-item {
      font-size: 28rpx;
      color: #222;
      padding: 20rpx;
      border-bottom: 1rpx solid #e6e6e6;
      .detail {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .detail-left {
          width: 72%;
          overflow: hidden;
          .company-name {
            font-size: 30rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .detail-right {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
        .desc {
          font-size: 26rpx;
          color: #999;
        }
        .primary {
          color: $uv-primary;
        }
      }
      .address {
        flex-basis: 100%;
        margin-left: 40rpx;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
  .history-box,
  .hot-box {
    margin-top: 50rpx;
    .history-title,
    .hot-title {
      font-weight: bold;
      display: flex;
      justify-content: space-between;
    }
  }
  .history-list,
  .hot-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
    .history-item,
    .hot-item {
      font-size: 24rpx;
      padding: 10rpx 20rpx;
      background: #f5f5f5;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
    }
  }
  .content__text {
    margin: 0 12rpx 12rpx;
    font-size: 28rpx;
    line-height: 1;
    color: #999999;
  }
}
.content__tip {
  margin-top: 20rpx;
  font-size: 12px;
  line-height: 1;
  color: #999999;
  text-align: center;
}
.content__btn {
  margin: 40rpx auto 0;
  width: 400rpx;
  color: $uv-primary;
  font-size: 28rpx;
  line-height: 80rpx;
  font-weight: 600;
  border-radius: 8rpx;
  text-align: center;
  border: 1rpx solid $uv-primary;
}
</style>
